<template>
  <nav>
    <view class="active">综合</view>
    <view>销量</view>
    <view>价格</view>
    <view>最新</view>
  </nav>
  <scroll-view
    class="List"
    scroll-y
    refresher-enabled
    :refresher-triggered="isShow"
    @scrolltolower="onScrolltolower"
    @refresherrefresh="onrefresherrefresh">
    <view class="items">
      <view class="item" v-for="item in listData">
        <image class="img" :src="item.mainImageUrl" mode="scaleToFill" />
        <view class="text">
          <image
            class="imgLogo"
            :src="item.allianceLogoUrl"
            mode="scaleToFill" />
          <strong> <view class="before"></view>{{ item.title }}</strong></view
        >
        <view class="price"
          ><text class="newprice">￥{{ item.discountPrice }}</text
          ><text class="originalprice">￥{{ item.originalPrice }}</text></view
        >
        <view class="coupons">
          <view class="coupon"
            ><view class="quan">券</view
            ><text>{{ item.couponAmount }}</text></view
          >
          <view class="rebate"
            ><view class="quan">约返</view
            ><text>{{ item.incomeAmount }}</text></view
          >
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getList } from "../../utils/api";
// 请求参数
const data = ref({
  _currentPageType: 1,
  _currentPageNo: 166072354552493393,
  categoryNo: 166072425541063420,
  sortStrategy: 0,
  sortType: 0,
  displayMode: 0,
  pageNo: 1,
  pageSize: "10",
});

// 请求数据
const listData = ref([]);
const getListData = async () => {
  const res = await getList(data.value);
  listData.value = res.ldata;
  console.log(res);
};
let newPageNo = ref(1);
const onScrolltolower = async () => {
  newPageNo.value = newPageNo.value + 1;
  const res = await getList({ ...data.value, pageNo: newPageNo.value });
  listData.value.push(...res.ldata);
  console.log("下一页");
};

const isShow = ref(false);
const onrefresherrefresh = async () => {
  isShow.value = true;
  newPageNo.value = 1;
  await getListData();
  console.log("下拉刷新");
  isShow.value = false;
};

onLoad(() => {
  getListData();
});
</script>

<style lang="scss">
nav {
  width: 100vw;
  height: 80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  view {
    padding: 0 10rpx;
  }
  .active {
    color: #df5886;
    border-bottom: 5rpx solid #df5886;
  }
}

.List {
  width: 100vw;
  height: calc(100vh - 80rpx);

  .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10rpx;
      .img {
        width: 45vw;
        height: 45vw;
        border-radius: 15rpx;
      }

      .text {
        width: 40vw;
        position: relative;
        .imgLogo {
          position: absolute;
          width: 28rpx;
          height: 28rpx;
          top: 5rpx;
        }
        strong {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-size: 28rpx;
          .before {
            display: inline-block;
            width: 28rpx;
            height: 28rpx;
            margin-right: 5rpx;
          }
        }
      }

      .price {
        width: 40vw;
        .newprice {
          color: #df5886;
          font-weight: 600;
          font-size: 32rpx;
        }
        .originalprice {
          color: #a0a0a2;
          text-decoration: line-through;
          font-size: 24rpx;
          margin-left: 10rpx;
        }
      }
      .coupons {
        width: 40vw;
        display: flex;
        justify-content: space-between;
        .coupon {
          display: flex;
          justify-content: space-between;
          color: #df5886;
          font-size: 24rpx;
          border: 4rpx solid #df5886;
          border-radius: 4rpx;

          .quan {
            background: #df5886;
            color: #fff;
            padding: 0 5rpx;
          }
          .rebate {
            background: #7034f3;
          }

          text {
            margin-right: 5rpx;
          }
        }
        .rebate {
          display: flex;
          justify-content: space-between;
          color: #7034f3;
          font-size: 24rpx;
          border: 4rpx solid #7034f3;
          border-radius: 4rpx;

          .quan {
            background: #7034f3;
            color: #fff;
            padding: 0 5rpx;
          }

          text {
            margin-right: 5rpx;
          }
        }
      }
    }
  }
}
</style>
